<template>
	<scroll-view scroll-y class="index-outer-wrapper" @scrolltolower="scrolltolower">
		<div class="header-outer-wrapper">
			<div class="search-wrapper">
				<image class="search-image" src="/static/icon-search.png"></image>
				<input type="text" placeholder-class="phcolor" placeholder="搜索" class="search-input" v-model="search" />
				<text @click="searchPost" class="search-button">搜索</text>
			</div>
		</div>
		<div class="loading" v-if="postList===''">加载中...</div>
		<div class="empty" v-else-if="postList.length===0">
			<image src="/static/empty-post.png" mode=""></image>
		</div>
		<div v-else class="list-wrapper">
			<div class="item-wrapper" @click="toDetail(post)" v-for="(post,index) in postList" :key="post.itId">
				<div class="info">
					<div>
						<text class="name">{{post.itName}}</text>
						<text class="address"> ({{post.itAddress}})</text>
					</div>
					<div class="topic-wrapper" v-if="post.itTopic">
						<image class="image" src="/static/icon-topic.png" mode=""></image>
						<text class="name">{{post.itTopic}}</text>
					</div>
				</div>
				<div class="line"></div>
				<div class="content">
					{{post.itContent}}
				</div>
				<div class="image-list" v-if="post.itImg">
					<div class="image-item" v-for="(image,imgindex) in post.itImg" :key="post.itId+imgindex">
						<image @click.stop='previewImage(image,post.itImg)' class="image" :src="image" mode=""></image>
					</div>
				</div>
				<div class="line"></div>
				<div class="tail-wrapper">
					<div class="time">{{post.createTimeStr|dateFormat}}</div>
					<div class="empty"></div>
					<div class="zan active" @click.stop="zanFn(post)">
						<image class="image" v-if="post.zanState===1" src="/static/icon-zan-active.png" mode=""></image>
						<image class="image" v-else @click.stop="zanFn(post)" src="/static/icon-zan.png" mode="">
						</image>
						<text class="text">{{post.supportNum}}</text>
					</div>
					<div class="pinglun active" @click.stop="toDetail(post,'comment')">
						<image class="image" src="/static/icon-pl.png" mode=""></image>
						<text class="text"></text>
						<text class="text">{{post.commentNum}}</text>
					</div>
				</div>
			</div>
		</div>
		<div class="loading" v-if="continueState==='show'">继续努力加载中...</div>
		<div class="loading" v-if="continueState==='finish'">---已经到底了---</div>
		<div class="form-button" @click="toRelease">我要吐槽</div>
	</scroll-view>
</template>

<script>
	import {
		PostList,
		PostDetail,
		PostCommentZan
	} from "@/utils/api.js"
	import {
		PICTURE_URL
	} from "@/utils/config.js"
	export default {
		data() {
			return {
				postList: '', // 帖子列表
				search: '',
				continueState: 'hide', // 是否显示继续加载的提示  show:显示   hide:隐藏    finish:结束
			}
		},
		onLoad() {
			this.initData()
			this.initPost()
		},
		onShow() {
			console.log(this.clickID)
			if (this.clickID) {
				this.initDetail(this.clickID)
			}
		},
		methods: {
			initData() {
				this.postList = ''
				this.continueState = 'hide'
				this.pagesize = 5
				this.pagenum = 1
			},
			initPost() {
				let zanlist = uni.getStorageSync('ZANLIST')
				if (zanlist) {
					zanlist = zanlist.split(',')
				} else {
					zanlist = []
				}
				PostList({
					pageNum: this.pagenum,
					pageSize: this.pagesize,
					query: this.search
				}).then((res) => {
					let rows = res.data.rows
					if (rows.length !== this.pagesize) {
						this.continueState = 'finish'
					}
					let formatRows = rows.map((item) => {
						if (item.itImg) {
							let imgArray = item.itImg.split(',')
							item.itImg = imgArray.map((image) => {
								return PICTURE_URL + image
							})
						}
						if (zanlist.indexOf('zan' + item.itId) != -1) {
							item.zanState = 1
						} else {
							item.zanState = 0
						}
						return item
					})
					if (this.postList === '') {
						this.postList = formatRows
					} else {
						this.postList = this.postList.concat(formatRows)
					}
					if (this.postList.length == 0) {
						this.continueState = 'hide'
					}
					console.log(this.postList)
				})
			},
			initDetail(id) {
				let zanlist = uni.getStorageSync('ZANLIST')
				if (zanlist) {
					zanlist = zanlist.split(',')
				} else {
					zanlist = []
				}
				PostDetail(id).then((res) => {
					let post = res.data.data
					if (post.itImg) {
						let imgArray = post.itImg.split(',')
						post.itImg = imgArray.map((image) => {
							return PICTURE_URL + image
						})
					}
					if (zanlist.indexOf('zan' + id) != -1) {
						post.zanState = 1
					} else {
						post.zanState = 0
					}
					for (let i = 0; i < this.postList.length; i++) {
						if (this.postList[i].itId === id) {
							this.postList[i] = post
							this.$forceUpdate()
							return
						}
					}
				})
			},
			searchPost() {
				this.initData()
				this.initPost()
			},
			// 点赞功能
			zanFn(post, index) {
				if (post.zanState === 1) return
				PostCommentZan({
					companyId: post.itId,
					state: '0'
				}).then((res) => {
					// 存进缓存里
					let zanlist = uni.getStorageSync('ZANLIST')
					if (zanlist) {
						zanlist = zanlist.split(',')
						zanlist.push('zan' + post.itId)
					} else {
						zanlist = ['zan' + post.itId]
					}
					uni.setStorageSync('ZANLIST', zanlist.join(','))
					// 修改列表
					post.zanState = 1
					post.supportNum++
					uni.showToast({
						title: '点赞成功',
						icon: 'none',
						duration: 2000,
						success() {}
					})
				})
			},
			toDetail(post, to) {
				this.clickID = post.itId
				uni.navigateTo({
					url: `/pages/detail/detail?id=${post.itId}&to=${to}`
				})
			},
			toRelease() {
				uni.navigateTo({
					url: '/pages/release/release'
				})
			},
			previewImage(current, urls) {
				console.log(current)
				console.log(urls)
				uni.previewImage({
					current: current,
					urls: urls
				})
			},
			scrolltolower() {
				if (this.continueState === 'finish') return
				this.continueState = 'show'
				this.pagenum++
				this.initPost()
			}
		}
	}
</script>

<style lang="scss">
	@import '@/utils/variable.scss';

	.index-outer-wrapper {
		padding-top: 140upx;
		height: 100%;
		box-sizing: border-box;

		.header-outer-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			padding-top: 48upx;
			padding-right: 180upx;
			box-sizing: border-box;
			height: 140upx;
			box-sizing: border-box;
			background-image: url(/static/bg-top.png);
			background-size: cover;

			.search-wrapper {
				margin: 0 auto;
				width: 520upx;
				height: 64upx;
				line-height: 64upx;
				background-color: #000;
				border-radius: 80upx;
				display: flex;

				.search-image {
					margin: 20upx 24upx 0 24upx;
					margin-top: 16upx;
					vertical-align: middle;
					width: 32upx;
					height: 32upx;
				}

				.search-input {
					flex: 1;
					height: 64upx;
					line-height: 64upx;
					color: $base-color;
					font-size: 28upx;
				}

				.phcolor {
					color: #cfa25eee;
				}

				.search-button {
					margin: 0 32upx;
					color: $base-color;
					font-size: 28upx;
				}
			}
		}

		.list-wrapper {
			padding: 24rpx;
			box-sizing: border-box;

			.item-wrapper {
				margin-bottom: 24upx;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 24rpx;

				.line {
					margin: 16rpx;
					height: 2rpx;
					background-color: #F1F1F1;
				}

				.info {
					display: flex;
					justify-content: space-between;

					.address {
						font-size: 24rpx;
						color: #999999;
					}

					.topic-wrapper {
						height: 56upx;
						line-height: 56upx;
						padding: 0 18upx;
						border-radius: 56upx;
						background-color: $base-bg;
						font-size: 0;
						white-space: nowrap;

						.image {
							width: 32upx;
							height: 32upx;
							margin-right: 12upx;
							vertical-align: middle;
						}

						.name {
							color: $base-color;
							font-size: 26upx;
							vertical-align: middle;
						}
					}
				}

				.content {
					margin-top: 16rpx;
					font-size: 28rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.image-list {
					display: flex;
					flex-wrap: wrap;
					margin-right: -24rpx;

					.image-item {
						position: relative;
						margin-top: 24rpx;
						margin-right: 24rpx;
						flex: 0 0 200upx;
						width: 200upx;
						height: 200upx;
						border-radius: 8rpx;
						overflow: hidden;

						.mast {
							position: absolute;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, .55);
							color: #fff;
							line-height: 200rpx;
							text-align: center;
							font-size: 60upx;
						}

						.image {
							width: 200upx;
							height: 200upx;
						}
					}
				}

				.tail-wrapper {
					display: flex;
					height: 80upx;
					line-height: 80upx;

					.image {
						margin-right: 8upx;
						width: 40upx;
						height: 40upx;
						vertical-align: middle;
					}

					.time {
						font-size: 24upx;
						color: #999999;
					}

					.active {
						color: $base-color;
					}

					.text {
						vertical-align: middle;
					}

					.empty {
						flex: 1;
					}

					.zan,
					.pinglun {
						margin-left: 36upx;
						font-size: 28upx;
					}
				}
			}
		}

		.form-button {
			position: fixed;
			bottom: 120upx;
			left: 0;
			background-color: $base-bg;
			color: $base-color;
			height: 88upx;
			line-height: 88upx;
			padding: 0 32upx 0 24upx;
			border-top-right-radius: 88upx;
			border-bottom-right-radius: 88upx;
			font-size: 28upx;
		}
	}
</style>
